<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <!-- <template #title>
        <header class="titleHeader">
          <div class="titleLeft">消息列表
          </div>
        </header>
      </template> -->
      <a-tabs
        v-model:activeKey="activeKey"
        animated
        @change="handleTabChange"
        class="user"
      >
        <a-tab-pane key="1">
          <template #tab>
            <span> <SwitcherOutlined />基础信息 </span>
          </template>
          <a-card size="small" :bordered="false" class="box-card marginTop12">
            <BasicInfo />
          </a-card>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span> <FundOutlined />数据看板 </span>
          </template>
          <a-card size="small" :bordered="false" class="box-card marginTop12">
            <DataBoard />
          </a-card>
        </a-tab-pane>
        <a-tab-pane key="3">
          <template #tab>
            <span> <EditOutlined />游戏点评 </span>
          </template>
          <a-card size="small" :bordered="false" class="box-card marginTop12">
            <GameReview />
          </a-card>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { EditOutlined, FundOutlined, SwitcherOutlined } from "@ant-design/icons-vue";
import BasicInfo from "./basicInfo.vue";
import DataBoard from "./dataBoard.vue";
import GameReview from "./gameReview.vue";

const activeKey = ref("1");
const handleTabChange = (e) => {
  activeKey.value = e;
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
<style lang="less">
// .user{
//   color: #6E6E6E;
//   .ant-tabs-ink-bar{
//     background-color: #29834a;
//   }
//   .ant-tabs-nav .ant-tabs-tab-active {
//     color: #4CC87E;
//     max-height: 450px;
//     overflow-y: scroll;
//     margin-right: 4px;
//     padding-right:12px;
//   }
// }
</style>
